<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           
    </style>
</head>
<body>
    
</body>
</html>
<script>
    //export命令 
    //模块功能主要由两个命令构成export && import
    //即export用于规定模块的对外接口       export负责进行模块化   也是模块化的输出 
    //import用于输入输入其他模块提供的功能 import负责把模块化引入  也是模块化
    //使用了export 命令定义模块的对外接口 其他js 文件就可以通过import 来加载这个模块  
    /*
      export可以把变量 函数 对象进行模块化 提供外部调用的接口 让外部进行引用 
    */

    //看代码案例 把一个变量模块化 新建一个temp.js文件 然后在文件中输出一个模块变量 
    export var a = "chang";
    //然后可以在index.js 中以import的形式引入 
    import {a} from "./temp.js";
    //这就是 一个简洁的模块的输出和引入  


//多变量的输出     
    //声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。
    var a ='jspang';
    var b ='大兄弟儿';
    var c = 'web';
    export {a,b,c}

//函数的模块化输出
    export function add(a,b){
        return a+b;
    }    


//as的用法
    //不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。
    var a ='jspang';
    var b ='技术胖';
    var c = 'web';
    export {
        x as a,     //！通常情况下变量就是本来的名字 但是可以使用as 关键字重命名
        y as b,
        z as c
    }

//export default的使用 加上default相当是一个默认的入口。在一个文件里export default只能有一个。
//export和export default的区别
//1.export
        export var a ='jspang';
        export function add(a,b){
            return a+b;
        }
        //对应的导入方式
        import {a,add} form './temp';//也可以分开写
//2.export defalut
        export default var a='jspang';
        //对应的引入方式
        import str from './temp';


</script>